<script setup lang="ts">
import Electron from "electron";
import {
  Back,
  CloseBold,
  Operation, Right,
  SemiSelect
} from "@element-plus/icons-vue";
import {ref} from "vue";
import router from "@/router";

function toMin() {
  Electron.ipcRenderer.send('window-min')
}
function close() {
  Electron.ipcRenderer.send('window-close')
}

const toPath = (path: string) => {
  router.push({
    path: path
  })
}

let menus = ref([
  {"name":'Setting One',"path":'SOne',"icon":'Plus'},
  {"name":'Setting Two',"path":'STwo',"icon":'CirclePlusFilled'},
  {"name":'Setting Three',"path":'SThree',"icon":'CirclePlus'},
  {"name":'Setting Four',"path":'SFour',"icon":'Check'},
])
</script>

<template>
  <div class="ItemHeard">
     <div class="ItemHeard-left">
       <el-icon class="ItemHeard-icon" size="25" color="white" @click="router.back()">
         <back />
       </el-icon>
       <el-icon class="ItemHeard-icon" size="25" color="white" @click="router.forward()">
         <right />
       </el-icon>
     </div>
     <div class="ItemHeard-right">
       <el-dropdown :hide-on-click="true">
         <el-icon class="ItemHeard-icon dropdown" size="25" color="white">
           <Operation/>
         </el-icon>
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item v-for="item in menus" :icon="item.icon" @click="toPath(item.path)">{{item.name}}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon class="ItemHeard-icon toMin" size="25" color="white" @click="toMin()">
         <SemiSelect/>
       </el-icon>
       <el-icon class="ItemHeard-icon close" size="25" color="white" @click="close()">
         <CloseBold/>
       </el-icon>
     </div>
  </div>
</template>

<style scoped lang="scss">
@import "ItemHeard";
</style>